iT邦幫忙

2024 iThome 鐵人賽

DAY 4
0

文章同步更新在 CodeFictionist

今天的主題是稍微來解個惑。什麼疑惑呢?
在前面的文章中,說過:

@keyframesanimation 負責控制動畫的時間與進度。

但我們在第二天的 CSS 變形基礎中有談到一個 CSS 屬性 transition,足夠細心你會發現他的語法跟 animation 幾乎完全一致。
所以 transitionanimation 到底有什麼差別呢?


transition vs animation

其實最簡單的差別在於 transition 接受的屬性遠比 animation 少。
從前面文章可以知道 transition 可以調控的只有:

  • property
  • duration
  • timing-function
  • delay

animation 則可以多控制:

  • iteration-count
  • direction
  • play-state
  • fill-mode

(不懂上面屬性在幹嘛的可以飛回去看看前面的文章)
transitionanimation 比起來就像個先天不足的小孩,天生就比它的手足 animation 少了一些功能。
所以說既生瑜何生亮呢?
然而實際情況是,他們根本就不是在同一個賽場上。

先說結論:
transition 適合作為使用者與元素互動的過度效果,而 animation 則適合做網頁中常駐的動畫。

我們拆成幾個項目來看造成他們彼此之間差異的原因。


複雜度與可控性

基於上面提到 transition 天生比 animation 少了一些屬性,這也就意味著 transition 的可控性比 animation 低。
它不能控制動畫的播放次數、方向、播放狀態,也無法如 animation 一樣透過 @keyframes 來細化控制動畫的進度。

觸發方式

transition 是被動的,這意味著它只有在某些事件觸發時才會執行。
比如說 :hoverfocusactive 等等。

animation 的觸發則不需要特定的觸發事件。它可以自動或根據條件開始,並通過 @keyframes 來定義動畫的多個階段。

重複性

因為觸發方式的不同,transition 通常只會執行一次,而 animation 則可以通過 iteration-count 來控制重複次數。

結語

沒想到吧,今天有結語 ~
誒好今天沒有 code 範例,想看 animationtransition 的範例可以回去看看前面的文章。
但總之,今天開這個主題是想探討 transitionanimation 這兩個長得極為相似的 CSS 屬性他們之間的差異。
現在我們至少有一個結論:

transition 適合作為使用者與元素互動的過度效果,animation 適合做網頁中常駐的動畫。


上一篇
Day 03 - 複合動畫
下一篇
Day 05 - 3D 變形
系列文
一天一項 CSS 小技巧:打造視覺與互動效果30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言